<template>
    <div>
        <div class="tabNav">
            <router-link to="/index">
                <img src="../../assets/img/sidebar1.png" />首页
            </router-link>
            <b>/<img style="top: 1px" src="../../assets/img/settlement.png" />无感发薪结算单</b>
            <el-input
                placeholder="请输入项目名称进行搜索"
                suffix-icon="el-icon-search"
                @change="searchMethods"
                v-model="searchValue">
            </el-input>
            <!-- <em><i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-data"></i>结算数量：{{ settlementCountNumber }}</em> -->
        </div>

        <el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee cardTitcc" shadow="hover">
					<!-- <div v-if="activeName == 0" class="excelDownload"> -->
                    <div class="excelDownload">
                        <!-- <el-button size="small" type="primary" @click="addTaskModules = true">添加结算单</el-button> -->
                        <el-button size="small" type="primary" @click="commission()">新增发佣</el-button>
					</div>
					<el-tabs class="tab-personal" v-model="activeName">
						<el-tab-pane label="全部" name="0">
							<settlement-table v-if="activeName == 0" ref="searchMethods" :search="searchValue" :personalType="0"></settlement-table>
						</el-tab-pane>
						<el-tab-pane label="未打款" :lazy="true" name="1">
							<settlement-table v-if="activeName == 1" ref="searchMethods" :search="searchValue" :personalType="1"></settlement-table>
						</el-tab-pane>
						<el-tab-pane label="已打款" :lazy="true" name="2">
							<settlement-table v-if="activeName == 2" ref="searchMethods" :search="searchValue" :personalType="2"></settlement-table>
						</el-tab-pane>
						<el-tab-pane label="已作废" :lazy="true" name="3">
							<settlement-table v-if="activeName == 3" ref="searchMethods" :search="searchValue" :personalType="3"></settlement-table>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>

        <!-- 批量验收弹出层 -->
        <el-dialog title="添加结算单" custom-class="task-margin" v-model="addTaskModules" @close="taskClose" width="600px">
        <div class="add-task">
            <el-form
            :model="taskForm"
            :rules="rules"
            v-if="addTaskModules"
            ref="taskForm"
            label-width="100px"
            class="demo-ruleForm"
            >
            <el-form-item label="选择项目" prop="projectName">
                <el-select class="settlementWidth" v-model="projectNo" placeholder="请选择项目">
                    <el-option
                    v-for="item in tableData"
                    :key="item.projectName"
                    :label="item.projectName"
                    :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-upload
                ref="upload"
                name="excel"
                :multiple="false"
                :limit="1"
                :auto-upload="false"
                accept=".xlsx, .xls"
                action="#"
                :file-list="fileList"
                :on-change="xlsxFilelist"
                :on-remove="deleteXlsxfile"
                drag
                >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
                <div class="el-upload__tip text-center">
                <span style="margin-left: 60px">仅允许导入xls、xlsx格式文件。</span>
                <span style="cursor: pointer;color: #326cf0;" @click="openUrl">下载模板</span>
                </div>
            </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
            <el-button @click="addTaskMethods1">取 消</el-button>
            <el-button type="primary" @click="addTaskMethods"
                >确 定</el-button
            >
            </span>
        </template>
        </el-dialog>

    </div>
</template>

<script>
// import axios from "axios";
import SettlementTable from '../../components/table/SettlementTables.vue'
export default {
    name: "dashboard",
    data() {
        return {
            activeName: '0',
            searchValue: '',
            businessId: JSON.parse(localStorage.getItem("bussines_info")).businessId,
            tableData: {},
			settlementCountNumber: 0, // 结算数量,
            addTaskModules: false,
            showUpdate: 0,
            projectNo: '',
            projectName: '',
            fileList: [],
            taskForm: {
            },
        };
    },
    components: {
		SettlementTable
    },
	mounted() {
		this.getTaskList()
	},
    methods: {
        commission(){
            this.$router.push("/commission")
        },
        xlsxFilelist(file) {
            this.fileList = [file]
        },
        deleteXlsxfile() {
            this.fileList = []
        },
        addTaskMethods() {
        // 新建任务
            if(this.projectNo == ''){
                this.$message({
                message: '请选择项目',
                type: 'error',
                offset: 60
                })
                return false
            }else if(this.fileList.length == 0) {
                this.$message({
                message: '请选择上传结算单列表',
                type: 'error',
                offset: 60
                })
                return false
            }
            this.$refs.taskForm.validate((valid) => {
                if (valid) {
                let file = new FormData()
                file.append("file", this.fileList[0].raw)
                file.append("projectId", this.projectNo)
                this.$http({
                    url: "/api/quick/numb/addSettlementInfo",
                    method: "post",
                    headers: {
                    "Content-Type": "multipart/form-data",
                    },
                    data: file
                }).then((data) => {
                    if (data.code == 0) {
                    if(data.result == null || data.result.data.length == 0) {
                        this.addTaskModule = false
                        this.$message({
                        message: '添加结算单成功',
                        type: 'success',
                        offset: 60
                        })
                        this.projectNo = ''
                        this.addTaskModules = false
                        this.fileList = []
                        this.$refs.searchMethods.getTableData()
                    }else {
                        this.$message({
                        message: '添加结算单失败！',
                        type: 'error',
                        offset: 60
                        })
                    }
                    }
                });
                } else {
                return false;
                }
            });
        },
        addTaskMethods1() {
            this.fileList = []
            this.addTaskModules = false
        },
        openUrl() {
            window.open('https://media.iscqifuxinxi.com/template/%E7%BB%93%E7%AE%97%E5%8D%95%E5%88%9B%E5%BB%BA%E6%A8%A1%E7%89%88.xlsx')
        },
        getTaskList() {
        // 获取列表信息
            this.$http({
                url: "/api/quick/project/getProjectPage",
                method: "post",
                headers: {
                "Content-Type": "application/json",
                },
                data: {
                pageNum: 1,
                pageSize: 100,
                businessId: this.businessId,
                },
            }).then((data) => {
                if (data.code == 0) {
                this.tableData = data.result.list
                }
            });
        },
		searchMethods() {
			// 搜索
			this.$refs.searchMethods.getTableData()
		},
		settlementCount() {
			// 获取结算数量
			this.$http({
				url: '/api/settlement/selectSettlementCount',
				method: 'post',
				headers: {
					'Content-Type': 'application/json'
				}
			}).then(data => {
				if(data.code === 0) {
					this.settlementCountNumber = data.result
				}
			})
		},
    }
};
</script>
<style lang="scss" scoped>
.settlementWidth {
    width: 360px;
}
.tab-personal {
    background-color: #FFFFFF;
    :deep(.el-tabs__header)  {
        margin-bottom: 10px;
        padding: 8px 20px 0;
    }
    :deep(.el-tabs__item) {
        color: #0A2E6A;
        font-weight: normal;
    }
    :deep(.el-tabs__item.is-active) {
        color: #326CF0;
        font-weight: 500;
    }
    :deep(.el-tabs__nav-wrap::after) {
        background-color: #FFFFFF;
    }
    :deep(.el-tabs__active-bar) {
        background-color: #326CF0;
        height: 4px;
        border-radius: 2px;
    }
}
.cardTitcc {
    margin-bottom: -10px;
}
.excelDownload {
    position: absolute;
    right: 30px;
    top: 14px;
    cursor: pointer;
    z-index: 111;
}
</style>